{% extends "main/layout.html" %}

{% block head %}
<link rel="stylesheet" href="static/main/css/offcanvas.css">
<link rel="stylesheet" href="static/main/css/buttons.css">

<link rel="stylesheet" href="static/main/css/kityminder.css" rel="stylesheet">

<style type="text/css">

    .container-fluid {
        height: 1000px;
    }

</style>

<script type="text/javascript" src="static/main/js/kity.min.js"></script>

{% endblock %}

{% block outcontainer %}


<div class="container-fluid">
    <div class="row row-offcanvas row-offcanvas-left" id="rowX">

        <div class="col-6 col-md-3 sidebar-offcanvas" id="sidebar">
            <div class="list-group" id="list-tab" role="tablist">


            </div>
        </div>
        <div class="col-18 col-md-9">

            <p class="float-left d-md-none">
                <button type="button" class="button button-glow button-border button-box button-primary" id="listbutton"
                        data-toggle="list">>>
                </button>
            </p>

            <p class="float-right">
                <button type="button" id="flashbtn" class="button button-glow button-border button-box button-action">
					<span class="step size-64">
				  		<i class="icon ion-android-refresh"></i>
					</span>
                </button>
            </p>

            <div class="jumbotron">
                <h1>Hello, world!</h1>
                <p>This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some
                    responsive-range viewport sizes to see it in action.</p>
            </div>

            <div class="tab-content" id="nav-tabContent">

            </div>
        </div>
    </div>

</div>


</div>

{% endblock %}

{% block scripts %}

<script src="/static/main/js/offcanvas.js"></script>

<script>
    var home = document.getElementById('homenav');
    var web = document.getElementById('webdocs');
    var fpga = document.getElementById('fpgadocs');
    var algorithm = document.getElementById('algorithm');
    var about = document.getElementById('aboutnav');
    web.className = 'nav-item active';
    home.className = 'nav-item';
    fpga.className = 'nav-item';
    algorithm.className = 'nav-item';
    about.className = 'nav-item';
</script>

<script>
    $(document).ready(function () {
        $("#flashbtn").trigger("click");
        if (parseInt($("#sidebar").css("height")) >= 400) {
            $("#rowX").css("height", $("#sidebar").css("height"));
        }
    });

    $("#flashbtn").click(function () {

        $.post("/api/art/web", {"loc": "title"}, function (data) {
            $("#list-tab").html(data);
        });

        $.post("/api/art/web", {"loc": "content"}, function (data) {
            $("#nav-tabContent").html(data);
        });
    });
</script>

{% endblock %}
